<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <button @click="type=1">体育</button>
            <button @click="type=2">热搜</button>
            <button @click="type=3">娱乐</button>
            <button @click="type=4">动漫</button>
        </div>
        <div>
            <ul v-show="type%4===1">
                <li>詹皇比KD先练起后仰投篮 杜兰特怀念12年那个夏天</li>
                <li>韩国女足4-0取胜中国台北女足，获东亚杯首胜</li>
                <li>跳远比赛规则一览：若是打平，会一直跳下去吗？</li>
                <li>从街头混混到UFC巨星，一身顶级技术和纪录，不是冠军却胜似冠军</li>
            </ul>
            <ul v-show="type%4===2">
                <li>国家宗教局：对宗教场所紧急排查</li>
                <li>周劼回应炫富：父亲并非副局长</li>
                <li>首个国产抗新冠口服药获批上市</li>
                <li>与趣店合作惹争议 贾乃亮傅首尔致歉</li>
            </ul>
            <ul v-show="type%4===3">
                <li>林志颖第一场手术完成：耗时5小时</li>
                <li>孙杨与张豆豆牵手回老家</li>
                <li>郑州城区现罕见“绿色天空”</li>
                <li>樊振东缺赛被扣1400分仍排世界第一</li>
            </ul>
            <ul v-show="type%4===0">
                <li>高中生暑假发自拍朋友圈被处分</li>
                <li>4名发小6年后一起考上清华</li>
                <li>丈夫出轨赠情人379万 妻子全部追回</li>
                <li>北京一男子划皮划艇上班：不堵车</li>
            </ul>
        </div>

    </div>
    <script>
        /* 设置为 false 以阻止 vue 在启动时生成生产提示 */
        Vue.config.productionTip = false;
        //实例化Vue
        const vm = new Vue({
            //el代表的是容器,值是一个选择器或者是一个元素,一般使用id(因为id是唯一的)
            el: "#app",
            //data必须声明为返回一个初始数据对象的函数,因为数组可能被用来创建多个实例.如果data仍然是一个存粹的对象,则所有的实例将共享引用同一个数据对象!通过提供data函数,每次创建一个新实例后,我们能够调用data函数,从而返回初始数据的一个全新副本数据对象
            data() {
                return {
                    type: "1"
                }
            }
        })
    </script>
</body>

</html>